<template>
    <div class="appointment settle-sub-box">
        <!--        <scroller :on-infinite="infinite" ref="scoller" :noDataText="(applyList[0]?'没有更多数据了':'')">-->
        <div class="history">
            <div class="list clearfix" v-for="(list,index) in applyList" :key="index">
                <div class="head">
                    <span class="state" v-if="list.state==1">预约成功</span>
                    <span class="state" v-if="list.state==2">已取消</span>
                    <span class="state" v-if="list.state==3">已过期</span>
                    就诊人：{{list.userName}}<span v-if="list.self">(本人)</span>
                </div>
                <div class="cont">
                    <div class="clearfix">
                        <div class="label">就诊科室：</div>
                        <div class="value">{{list.dept + ' ' + list.doctorName}}</div>
                    </div>
                    <div class="clearfix">
                        <div class="label">就诊时间：</div>
                        <div class="value">{{list.appointmentDate + ' ' + list.dayStr + ' ' + list.visitTime}}</div>
                    </div>
                </div>
                <div class="foot">
                    <span class="button" @click="cancel(list)" v-if="list.state==1">取消预约</span>
                    <div class="clearfix">
                        <div class="label">提交时间：</div>
                        <div class="value">{{list.createTime}}</div>
                    </div>
                </div>
            </div>
            <infinite-loading @infinite="infiniteHandler" spinner="spiral" :distance="100">
                <div slot="no-more"></div>
                <!--                <div slot="no-more" class="noMore">没有更多记录了</div>-->
                <div slot="no-results"></div>
                <!--                <div slot="no-results" class="empty">暂无预约记录</div>-->
                <div slot="error" slot-scope="{ trigger }">
                    <!--                    Error message, click <a href="javascript:;" @click="trigger">here</a> to retry-->
                </div>
            </infinite-loading>
        </div>
        <div class="empty" v-if="!applyList[0]">暂无预约记录</div>
        <!--        </scroller>-->
        <div class="jump">
            <div class="primary" @click="$router.push('/department-list')">去挂号</div>
        </div>
        <confirm v-model="showConfirm" confirm-text="确认" cancel-text="取消"
                 class="confirm" @on-confirm="cancelSubmit()" :close-on-confirm="false">
            <div class="prompt">
                确定取消本次预约吗？
                <div class="tip">您近30天已经取消<span>{{applyTimes.cancelCount}}</span>次，主动取消达到<span>{{applyTimes.cancelLimit}}</span>次将被列入黑名单，无法预约挂号
                </div>
            </div>
        </confirm>
    </div>
</template>

<script>
    import {Confirm} from 'vux'

    export default {
        data() {
            return {
                applyList: [],
                showConfirm: false,
                currentList: null,
                applyTimes: {},
                index: 1,
                NoMoreData: false,
                empty: '没有更多数据了'
            }
        },
        mounted() {
            this.$emit('change', {
                style: {backgroundColor: '#f4f4f4'}
            })
        },
        methods: {
            // refresh(done) {
            //     this.index = 0
            //     this.init(done)
            // },
            // infinite(done) {
            //     this.init(done)
            // },
            infiniteHandler($state) {
                this.$http.get('/doctor/appointment/pageApplyInfo', {
                    size: 10,
                    current: this.index || 1
                }).then(result => {
                    this.applyList.push(...result.data.records)
                    if (result.data.pages <= result.data.current) {
                        $state.loaded()
                        $state.complete()
                    } else {
                        this.index += 1
                        $state.loaded()
                    }
                }).catch(() => {
                    $state.error()
                })
            },
            // init(done) {
            //     if (this.applyList[0]) {
            //         this.index++
            //     }
            //     // this.$http.get('/doctor/appointment/applyInfo').then(result => {
            //     this.$http.get('/doctor/appointment/pageApplyInfo', {
            //         size: 10,
            //         current: this.index || 1
            //     }).then(result => {
            //         if (result.success) {
            //             this.applyList.push(...result.data.records)
            //             if (result.data.pages <= result.data.current) {
            //                 done()
            //                 this.$refs.scoller.finishPullToRefresh()
            //                 this.$refs.scoller.finishInfinite(true)
            //             } else {
            //                 done()
            //             }
            //         } else {
            //             done()
            //             this.$refs.scoller.finishInfinite(true)
            //         }
            //     }).catch(() => {
            //         done()
            //         this.$refs.scoller.finishInfinite(true)
            //     })
            // },
            cancel(list) {
                this.$http.get('/doctor/appointment/countCancelApplyTimes').then(result => {
                    if (result.success) {
                        this.applyTimes = result.data
                        this.showConfirm = true
                        this.currentList = list
                    }
                })
            },
            cancelSubmit() {
                let _this = this
                this.showConfirm = false
                _this.$http.post('/doctor/appointment/cancelApply?applyId=' + this.currentList.id).then(result => {
                    if (result.success) {
                        _this.currentList.state = 2
                        _this.currentList = null
                        // _this.init()
                        _this.$vux.alert.show({
                            content: '取消预约成功'
                        })
                    }
                })
            }
        },
        components: {
            Confirm
        }
    }
</script>

<style scoped lang="less">
    .appointment {
        background-color: #f4f4f4;
        padding-top: 1rem;

        .history {
            .list {
                background-color: #fff;
                margin-bottom: .15rem;

                > div {
                    padding: 0 .3rem;
                    border-bottom: 1px solid #eee;

                    &:last-child {
                        border: 0 none;
                    }

                    .label {
                        float: left;
                        width: 1.45rem;
                        color: #999;
                    }

                    .value {
                        margin-left: 1.45rem;
                    }
                }

                .head {
                    line-height: .8rem;

                    .state {
                        float: right;
                        color: #999;
                    }
                }

                .cont {
                    padding-top: .15rem;
                    padding-bottom: .15rem;
                    line-height: .5rem;

                }

                .foot {
                    line-height: .8rem;

                    .button {
                        float: right;
                        background-color: #f4f4f4;
                        border: 1px solid #ddd;
                        padding: 0 .2rem;
                        font-size: .24rem;
                        line-height: .5rem;
                        height: .5rem;
                        margin-top: .15rem;
                        border-radius: .3rem;
                    }
                }
            }
        }

        .empty {
            /*text-align: center;*/
            /*padding-top: .5rem;*/
            color: #999;
            display: flex;
            padding-bottom: 1rem;
            height: 100%;
            justify-content: center;
            align-items: center;
        }

        .noMore {
            text-align: center;
            margin: .3rem 0;
            color: #999;
        }

        /deep/ .confirm {
            .prompt {
                line-height: .8rem;
                font-size: .32rem;

                .tip {
                    line-height: .4rem;
                    font-size: .26rem;
                    color: #999;
                }
            }
        }
    }

    .jump {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: .88rem;
        line-height: .88rem;
        z-index: 5;
        display: flex;

        &:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            box-shadow: 0 0 5px 0px #b1b1b1;
            height: 1px;
            width: 100%;
            z-index: 0;
        }

        > div, .el-button {
            flex: 1;
            text-align: center;
            position: relative;
            z-index: 1;
            border-radius: 0 !important;
            border: 0 none;
        }

        .back {
            background-color: #fff;
        }

        .primary {
            color: #fff;
            background-color: #6D97FF;
        }
    }
</style>
